<template>
    <div class="search-rd">
        <div class="search-header">
            <common-header title="往期合辑"></common-header>
            <div class="search_form">
                <div class="search_input">
                   <i class="search_icon"></i>
                    <input type="search" placeholder="输入搜索关键字" name="keyWord" id="keyWord" ref="queryInput" @click="toSearch">
                </div>
            </div>
            <div class="ptab" style="height: 44px;">
                <tab :line-width="2" active-color="#02d560" custom-bar-width="65px">
                  <tab-item :selected="selType == 'all'" @on-item-click="tabHandle('all')">全部</tab-item>
                  <tab-item :selected="selType == 'fast'" @on-item-click="tabHandle('fast')">筹集最快</tab-item>
                  <tab-item :selected="selType == 'hot'" @on-item-click="tabHandle('hot')">人气爆棚</tab-item>
                </tab>
            </div>
        </div>
        <div class="plist">
            <div class="wrapper" ref="wrapper">
                <div v-show="projectData.length > 0">
                    <div class="top-tip">
                        <span class="refresh-hook" v-html="pulldownMsg"></span>
                    </div>
                    <ul class="content project-wrap">
                        <li class="project-item" v-for="(item,index) in projectData">
                            <router-link :to="{path:'/productDetail',query:{id:item.id}}">
                                <div class="d-project-header clearfix">
                                    <div class="initiator">
                                        <span class="title-top-tip" v-show="selType == 'fast'">{{item.success_time | speedHandle(item.begin_time)}}</span>
                                        <span class="title-top-tip" v-show="selType == 'hot'">{{item.support_count}}人预约</span>
                                    </div>
                                </div>
                                <div class="d-project-content">
                                    <div class="project-img">
                                        <img :src="item.image ? 'http://zc.wzgaolaozhuang.com/'+item.image : previewImg" alt="">
                                    </div>
                                    <div class="project-data">
                                        <div class="d-project-content-title slh">
                                            {{item.name}}
                                        </div>
                                        <div class="d-project-content-type slh">
                                            <span class="sort-item">
                                                {{item.cate_name}}
                                            </span>
                                            <span class="sort-item">
                                                {{item.province}}-{{item.city}}
                                            </span>
                                        </div>
                                        <div class="progress">
                                            <div class="box-row">
                                                <div class="time flex-1">结束时间: {{item.end_time | formatTime}}</div>
                                                <div class="percent flex-1">预约进度: {{item.percent}}%</div>
                                            </div>
                                            <div class="weui-progress">
                                                <div class="weui-progress__bar">
                                                    <div class="weui-progress__inner-bar" :style="{width: item.percent > 100 ? '100%' : item.percent + '%'}"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </router-link>
                        </li>
                    </ul>
                    <div class="bottom-tip">
                        <span class="loading-hook">{{pullupMsg}}</span>
                    </div>
                </div>
                <div class="project-item" v-show="projectData.length <= 0">
                        <div class="d-project-content pt20">
                            <div class="project-img" :style="{backgroundImage:'url('+previewImg+')',backgroundSize:'100% 100%',backgroundRepeat:'no-repeat',backgroundPosition:'center center'}">
                            </div>
                            <div class="project-data">
                                <div class="d-project-content-title">
                                    暂无产品
                                </div>
                            </div>
                        </div>
                    </div>
            </div>
        </div>
        
    </div>
</template>
<style scoped lang="scss">
    .search-rd{
        background-color: rgb(248,248,248);
        
        .prod-conditions{
            position: fixed;
            top:0;
            left:0;
            height:55px;
            padding: 10px 0;
            overflow: hidden;
        }
        .search-header{
            position: fixed;
            top:0;
            left:0;
            width: 100%;
            z-index: 990;
        }
        .search_form {
            height:40px;
            padding: 5px 0;
            overflow: hidden;
            background-color: #ffffff;
            z-index: 997;
            .search_back{
                display: inline-block;
                width:10%;
                padding-top: 5px;
                i{
                    display: inline-block;
                    width:20px;
                    height:20px;
                    background: url(~__assets/images/icon/search-back.png) no-repeat;
                    background-size: 100% 100%;
                }
            }

            .search_input {
                position: relative;
                float: left;
                width: 74%;

                .search_icon{
                    position: absolute;
                    left: 10px;
                    top: 10px;
                    width: 15px;
                    height: 15px;
                    display: inline-block;
                    background: url('~__assets/images/icon/search1.png') no-repeat;
                    background-size: 100% 100%;
                }
            }

            input[type=search] {
                font-size: 14px;
                width:100%;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                height: 35px;
                /*text-align: center;*/
                padding-left: 35px;
                border: 0;
                border-radius: 4px;
                background-color: #fff;
            }
        }
        .search_form a {
            font-size: 14px;
            width: 16%;
            float: left;
            height:35px;
            line-height: 35px;
            text-align: center;
            color: #000;
        }
        .prod_box{overflow: hidden;}
        .wrapper{height:100%;}
    }
    .plist{
        position: absolute;
        left: 0;
        top: 125px;
        bottom: 40px;
        width: 100%;
        .wrapper{
            height: 100%;
        }
    }
    .project-item{
        background-color: #ffffff;
        padding: 10px a(30px) 0;
        margin-top: a(30px);
        min-height: a(160px);
        .initiator{
            .title-top-tip{
                display: inline-block;
                padding: 10px 0;
                font-size: 16px;
                color: rgb(255, 107, 67);
            }
        }
        .d-project-content{
            margin: 0 auto;
            position: relative;
            padding-left: a(208px);
            .project-img{
                position: absolute;
                left: 0;
                top: 0;
                width: a(190px);
                height: a(152px);

                img{width:100%;height: 100%;border-radius: 5px;}
            }
            .d-project-content-title{
                font-size: 14px;
            }
            .d-project-content-type{
                padding:12px 0;
                .sort-item{
                    margin-right: 40px;
                }
            }
        }
        
        .progress{
            padding-bottom: a(30px);
            .time{
                text-align: left;
                font-size: 10px;
                color: rgb(255, 107, 67);
            }
            .percent{
                text-align: right;
                font-size: 10px;
                color: rgb(2, 213, 96);
            }
            .weui-progress{
                margin-top: a(20px);
                display: -webkit-box;
                display: -webkit-flex;
                display: flex;
                -webkit-box-align: center;
                -webkit-align-items: center;
                align-items: center;

                .weui-progress__bar {
                    border-radius: a(3px);
                    height: 3px!important;
                    background-color: #ebebeb;
                    -webkit-box-flex: 1;
                    -webkit-flex: 1;
                    flex: 1;
                }
                .weui-progress__inner-bar {
                    border-radius: a(3px);
                    width: 0;
                    height: 100%;
                    background: linear-gradient(left top,#00FF00,#02D560);
                    background: -webkit-linear-gradient(left top,#00FF00,#02D560);
                    background: -moz-linear-gradient(left top,#00FF00,#02D560);
                }
            }
        }
    }
    .top-tip{
        position: absolute;  
        top: -40px;  
        left: 0;
        z-index: 1;  
        width: 100%;  
        height:40px;  
        line-height:40px;  
        text-align:center;
        color: #555;
    } 
      
    .bottom-tip{
        width: 100%;
        height: 35px;
        line-height: 35px;
        text-align: center;
        color: #777;
        background: #f2f2f2;
        position: absolute;
        bottom: -35px;
        left: 0;
    }
</style>
<script>
    import Bscroll from 'better-scroll';
    import {fTime} from '__assets/js/util';
    import {getPassed} from '__api';
    import previewImg from '__assets/images/preview-1.jpg';
    import commonHeader from '__cp/commonHeader';
    export default{
        name:'suc-case-view',
        // props:['moreProduct'],
        components:{commonHeader},
        data(){
            return{
                disabled: typeof navigator !== 'undefined' && /iphone/i.test(navigator.userAgent) && /ucbrowser/i.test(navigator.userAgent),
                openSel: false,
                previewImg: previewImg,
                selType: 'all',
                page:1,
                query:'',
                count:0,
                currntIndex:1,
                allLoad: true,
                listInitStatus: true,
                pulldownMsg: '下拉刷新',
                pulldownStatus: false,
                pullupMsg: '上拉加载更多',
                projectData: [],
            }
        },
        filters:{
            formatTime:function(val){
                return fTime(val);
            },
            speedHandle:function(st,bt){
                let v = st-bt;
                let rv = 0 + '秒';
                if( v <= 60 && v > 0){
                    rv = v + '秒'
                } else if( v > 60 && v <= 3600){
                    rv = parseInt(v/60) +'分'+ v % 60 + '秒'
                } else if( v > 3600 && v < 3600*24){
                    let h = parseInt(v/3600);
                    let m = parseInt((v - h * 3600)/60);
                    let s = parseInt(v - h*3600 - m*60)
                    rv = h+'小时'+m+'分'+s+'秒';
                } else if( v > 3600 * 24) {
                    let d = parseInt(v/3600/24);
                    let h = parseInt((v - d * 3600 * 24)/ 3600);
                    let m = parseInt((v - d * 3600 * 24 - h * 3600) / 60);
                    rv = d + '天' + h + '小时' + m + '分'
                }
                return rv;
            }
        },
        created(){
            let that = this;
            this.$nextTick(() => {
                if (!this.scroll) {
                  this.scroll = new Bscroll(this.$refs.wrapper, {
                        probeType:1,
                        click: true,
                        pullDownRefresh: {
                          threshold: 60,
                          stop: 40
                        },
                        pullUpLoad: {
                          threshold: -30, // 当上拉距离超过30px时触发 pullingUp 事件
                          stop: 40
                        }
                  })
                  this.scroll.on('scroll',(pos)=>{
                        if(pos.y > 50){
                            this.pulldownStatus = true;
                        }
                    });
                  this.scroll.on('touchEnd', (pos) => {
                    if(pos.y > 50){
                        that.pulldownMsg = "<span class='logo-span'><span class='f'>F</span><span class='u'>U</span><span class='n'>N</span><span class='s'>S</span></span> 加载中...";
                        that.page = 1;
                        that.allLoad = false;
                        that.getData(true,true)
                    }
                    else if(pos.y<(that.scroll.maxScrollY - 30)){   //下拉加载
                        if(!that.allLoad){
                            that.page++;
                            that.pullupMsg = '加载中...';
                            that.getData(false,false)
                        }
                    }
                  })
                } else {
                  this.scroll.refresh()
                }

                if(this.$route.query.type == 'fast'){
                    this.selType = 'fast'
                }
                if(this.$route.query.type == 'hot'){
                    this.selType = 'hot'
                }

                this.getData(true,true);
            })
        },
        methods:{
            tabHandle(param){
                this.selType = param;
                this.getData(true,true);
            },
            toSearch(){
                this.$router.push({ path:'/search'})
            },
            getData(clearData,isPullDown){
                this.$loading({nozz:true,small:true});
                let u = '';
                if(this.selType == 'hot'){
                    u = '&support=1'
                } else if(this.selType == 'fast'){
                    u = '&fast=1'
                }
                getPassed({
                    url: '/wap/index.php?ctl=deals&act=index&tpl=1&passed=1'+u
                }).then( res => {
                    console.log(res)
                    //刷新数据
                    if(clearData){
                        this.projectData = [];
                    }

                    this.projectData = this.projectData.concat(res.deal_list);
                    if(res.deal_list.length < res.pages[0]){
                        this.allLoad = true;
                        this.pullupMsg = '已全部加载'
                    }
                    
                    this.listInitStatus = true;

                    if(isPullDown){
                        setTimeout(()=>{
                            this.pulldownMsg = '下拉刷新'
                            //刷新列表后，重新计算滚动区域高度
                            this.scroll.refresh();
                            this.scroll.finishPullDown();
                        },500)
                    } else {
                        if(!this.allLoad) this.pullupMsg = '上拉加载更多';
                        //刷新列表后，重新计算滚动区域高度
                        this.scroll.refresh();
                        this.scroll.finishPullUp();
                    }

                    this.$loading.end();
                })
            },
            statusHandle(bt,nt,et,type,is_success){
                nt = nt ? nt : Date.parse(new Date())/1000;
                let r = '预约中';
                if(bt>nt){
                    r = '预热中';
                }
                else if(et<nt && et != 0){
                    if(is_success == 1){
                        r = '已成功'
                    } else {
                        r = '失败'
                    }
                } else {
                    if( type == 1){
                        r = '预约中'
                    }
                }
                return r;
            },
            back(){
                if (window.history.length <= 1) {
                    this.$router.push({path:'/index'})
                    return false
                } else {
                    this.$router.go(-1);
                    return;
                }
                //上面都没执行就说明卡在当前页不是最后一条， histroy记录数量大于1，又没有回退记录，只能返回首页，
                //如果上面都执行了 页面都跳走了，这个也就不用管了   
                setTimeout(() => {
                    this.$router.push({path:'/'})      
                },500)
            }
        }
    }

</script>
